https://laihao2.com/Home/WaterEdit/A987654321
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View
資料表設定好>再寫程式:加入資料庫>串聯資料庫>
參考前天的文章~
產生Models裡面類別檔dao>按:建置>
參考前天的文章~
Controllers裡面的Entities>
public ActionResult WaterEdit(string id)
{
var water = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == id);
WATER_BILL photo = _db.WATER_BILL.Find(id);
if (photo == null)
{
return HttpNotFound(); // 找不到
}
return View(water);
}
// POST: Edit Water
//[AllowAnonymous]
[HttpPost]
//public ActionResult WaterEdit(WATER_BILL water)
// 上傳PDF 檔案
public ActionResult WaterEdit(WATER_BILL water, HttpPostedFileBase pdfFile)
{
var model = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == water.DOCUMENT_ID);
//20250325水費要顯示 PDF 檔案
if (pdfFile != null && pdfFile.ContentLength > 0)
{
model.PDF_CONTENT = new byte[pdfFile.ContentLength];
pdfFile.InputStream.Read(model.PDF_CONTENT, 0, pdfFile.ContentLength);
}
if (model == null)
{ // 找不到這一筆記錄
return HttpNotFound();
}
else
{
model.FACTORY = water.FACTORY;
model.WATER_SIGNAL = water.WATER_SIGNAL;
model.FROM_BILLING_PERIOD = water.FROM_BILLING_PERIOD;
model.UNTIL_BILLING_PERIOD = water.UNTIL_BILLING_PERIOD;
model.TYPE = water.TYPE;
model.METER_NUMBER = water.METER_NUMBER;
model.METER_DIAMETER = water.METER_DIAMETER;
model.NUMBER_POINTERS = water.NUMBER_POINTERS;
model.TOTAL_WATER = water.TOTAL_WATER;
model.TOTAL_BILL_TAX = water.TOTAL_BILL_TAX;
model.CARBON_PERIOD = water.CARBON_PERIOD;
model.CARBON_EMISSION_FACTOR = water.CARBON_EMISSION_FACTOR;
model.CARBON_DIOXIDE = water.CARBON_DIOXIDE;
model.VOUCHER_NUMBER = water.VOUCHER_NUMBER;
}
_db.SaveChanges();
return RedirectToAction("WaterList");
}
//20250325水費要顯示 PDF 檔案
//[AllowAnonymous]
[HttpGet]
public FileContentResult GetPdfFile(string id)
{
var waterBill = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == id);
if (waterBill != null && waterBill.PDF_CONTENT != null && waterBill.PDF_CONTENT.Length > 0)
{
return File(waterBill.PDF_CONTENT, "application/pdf");
}
return null;
}
解釋程式碼
這段代碼是用於編輯和顯示水費賬單(包括上傳和下載 PDF 文件)的功能。下面是對代碼的詳細解釋:
WaterEdit(string id)
(GET)這是一個用於編輯頁面的控制器方法,用來根據提供的 id
獲取特定水費賬單的信息。
DOCUMENT_ID
查找賬單數據:
var water = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == id);
FirstOrDefault
會查找第一個符合條件的記錄,若找不到則返回 null
。WATER_BILL photo = _db.WATER_BILL.Find(id);
用 Find(id)
查找與 id
對應的水費賬單數據。HttpNotFound()
表示找不到該記錄。WaterEdit(WATER_BILL water, HttpPostedFileBase pdfFile)
(POST)這是一個用於提交編輯表單的控制器方法,包含文件上傳邏輯。
water.DOCUMENT_ID
查找數據庫中的對應記錄:
var model = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == water.DOCUMENT_ID);
if (pdfFile != null && pdfFile.ContentLength > 0)
{
model.PDF_CONTENT = new byte[pdfFile.ContentLength];
pdfFile.InputStream.Read(model.PDF_CONTENT, 0, pdfFile.ContentLength);
}
通過 pdfFile.InputStream.Read()
將 PDF 文件讀入到字節數組 model.PDF_CONTENT
中。HttpNotFound()
。model.FACTORY = water.FACTORY;
model.WATER_SIGNAL = water.WATER_SIGNAL;
model.FROM_BILLING_PERIOD = water.FROM_BILLING_PERIOD;
// 其他字段...
這里包括工廠、賬單周期、儀表信息等字段。_db.SaveChanges()
將所有修改保存到數據庫。GetPdfFile(string id)
(GET)這個方法用於獲取存儲在數據庫中的 PDF 文件。
DOCUMENT_ID
查找水費賬單:
var waterBill = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == id);
return File(waterBill.PDF_CONTENT, "application/pdf");
這會將 PDF 文件作為 application/pdf
格式返回給瀏覽器,使用戶可以下載或查看文件。null
。這段代碼的核心功能是編輯水費賬單信息,上傳和保存 PDF 文件,以及通過 ID 下載 PDF 文件。
產生畫面View程式碼
@*@model IEnumerable<WebApplication5.Models.WATER_BILL>*@
@model WebApplication5.Models.WATER_BILL
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
ViewBag.Title = "WaterEdit";
}
<style>
.align-right {
text-align: right;
}
.nowrap {
white-space: nowrap;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// 當FACTORY字段的值更改時
$("#FACTORY").change(function () {
// 獲取所選的FACTORY值
var FACTORY = $(this).val();
// 根據FACTORY的值設置相應的ELECTRICITY_SIGNAL選項
if (FACTORY === "永科廠") {
$("#WATER_SIGNAL").val("23-45678901-2");
$("#METER_NUMBER").val("123D456780");
$("#METER_DIAMETER").val("75");
} else if (FACTORY === "永康廠") {
$("#WATER_SIGNAL").val("12-34567890-1");
$("#METER_NUMBER").val("123D456789");
$("#METER_DIAMETER").val("40");
}
@*else if (FACTORY === "樹谷二期") {
$("#WATER_SIGNAL").val("63-43233503-8");
$("#METER_NUMBER").val("103G000227");
$("#METER_DIAMETER").val("100");
}*@
});
});
</script>
<script>
$(document).ready(function () {
// 為數字輸入框添加格式化事件
$(".numeric-input").on("input", function () {
formatNumberInput($(this));
});
// 提交表單時移除千位分隔符
$("form").submit(function () {
$(".numeric-input").each(function () {
$(this).val($(this).val().replace(/,/g, ''));
});
});
});
// 格式化數字輸入框的值
/*function formatNumberInput(input) {
var val = input.val().replace(/,/g, ''); // 移除現有的千位分隔符
if (val != '') {
val = parseInt(val); // 確保輸入是一個數值
input.val(val.toLocaleString()); // 使用toLocaleString()添加千位分隔符
}
}*/
// 格式化數字輸入框的值
function formatNumberInput(input) {
var val = input.val().replace(/,/g, ''); // 移除現有的千位分隔符
if (val != '') {
var parts = val.split('.'); // 將輸入值拆分為整數部分和小數部分
parts[0] = parseInt(parts[0]).toLocaleString(); // 格式化整數部分
input.val(parts.join('.')); // 重新組合並設置輸入框的值
}
}
</script>
@if (ViewBag.Msg != null)
{
<div class="alert alert-danger">@ViewBag.Msg</div>
}
<body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@*20240325增加上傳檔案 *@
@*@using (Html.BeginForm()) *@
@using (Html.BeginForm("WaterEdit", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-inline">
<h3 style="margin-top: 50px;">水電帳單:修改</h3>
<h4>單據號碼:無法修改</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.DOCUMENT_ID)
<div class="form-group">
@Html.LabelFor(model => model.DOCUMENT_ID, htmlAttributes: new { @class = "control-label" })
@*不能修改*@
@Html.EditorFor(model => model.DOCUMENT_ID, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
@Html.ValidationMessageFor(model => model.DOCUMENT_ID, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.FACTORY, htmlAttributes: new { @class = "control-label" })
@{
var listItemsFACTORY = new List<SelectListItem>
{
new SelectListItem { Text = "永康廠", Value = "永康廠", Selected = true },
@*new SelectListItem { Text = "樹谷一期", Value = "樹谷一期", Selected = true },*@
new SelectListItem { Text = "永科廠", Value = "永科廠" }
};
}
@Html.DropDownList("FACTORY", listItemsFACTORY, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.FACTORY, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.WATER_SIGNAL, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.WATER_SIGNAL, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
@Html.ValidationMessageFor(model => model.WATER_SIGNAL, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.FROM_BILLING_PERIOD, htmlAttributes: new { @class = "control-label" })
@Html.TextBoxFor(model => model.FROM_BILLING_PERIOD, "{0:yyyy-MM-dd}", new { @class = "form-control" })
@*@Html.EditorFor(model => model.FROM_BILLING_PERIOD, new { htmlAttributes = new { @class = "form-control" } })*@
@Html.ValidationMessageFor(model => model.FROM_BILLING_PERIOD, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.UNTIL_BILLING_PERIOD, htmlAttributes: new { @class = "control-label" })
@Html.TextBoxFor(model => model.UNTIL_BILLING_PERIOD, "{0:yyyy-MM-dd}", new { @class = "form-control" })
@*@Html.EditorFor(model => model.UNTIL_BILLING_PERIOD, new { htmlAttributes = new { @class = "form-control" } })*@
@Html.ValidationMessageFor(model => model.UNTIL_BILLING_PERIOD, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.TYPE, htmlAttributes: new { @class = "control-label" })
@{
var listItemsTYPE = new List<SelectListItem>
{
new SelectListItem { Text = "普通", Value = "普通", Selected = true },
new SelectListItem { Text = "工業", Value = "工業" }
};
}
@Html.DropDownList("TYPE", listItemsTYPE, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.TYPE, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.METER_NUMBER, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.METER_NUMBER, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
@Html.ValidationMessageFor(model => model.METER_NUMBER, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.METER_DIAMETER, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.METER_DIAMETER, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
@Html.ValidationMessageFor(model => model.METER_DIAMETER, "", new { @class = "text-danger" })
</div>
@*<div class="form-group">
@Html.LabelFor(model => model.NUMBER_POINTERS, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.NUMBER_POINTERS, new { htmlAttributes = new { @class = "form-control align-right" } })
@Html.ValidationMessageFor(model => model.NUMBER_POINTERS, "", new { @class = "text-danger" })
</div>*@
@*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
<div class="form-group">
@Html.LabelFor(model => model.NUMBER_POINTERS, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.NUMBER_POINTERS, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
@Html.ValidationMessageFor(model => model.NUMBER_POINTERS, "", new { @class = "text-danger" })
</div>
@*<div class="form-group">
@Html.LabelFor(model => model.TOTAL_WATER, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.TOTAL_WATER, new { htmlAttributes = new { @class = "form-control align-right" } })
@Html.ValidationMessageFor(model => model.TOTAL_WATER, "", new { @class = "text-danger" })
</div>*@
@*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
<div class="form-group">
@Html.LabelFor(model => model.TOTAL_WATER, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.TOTAL_WATER, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
@Html.ValidationMessageFor(model => model.TOTAL_WATER, "", new { @class = "text-danger" })
</div>
@*<div class="form-group">
@Html.LabelFor(model => model.TOTAL_BILL_TAX, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.TOTAL_BILL_TAX, new { htmlAttributes = new { @class = "form-control align-right" } })
@Html.ValidationMessageFor(model => model.TOTAL_BILL_TAX, "", new { @class = "text-danger" })
</div>*@
@*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
<div class="form-group">
@Html.LabelFor(model => model.TOTAL_BILL_TAX, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.TOTAL_BILL_TAX, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
@Html.ValidationMessageFor(model => model.TOTAL_BILL_TAX, "", new { @class = "text-danger" })
</div>
@*<div class="form-group">
@Html.LabelFor(model => model.CARBON_PERIOD, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.CARBON_PERIOD, new { htmlAttributes = new { @class = "form-control align-right" } })
@Html.ValidationMessageFor(model => model.CARBON_PERIOD, "", new { @class = "text-danger" })
</div>*@
@*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
<div class="form-group">
@Html.LabelFor(model => model.CARBON_PERIOD, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.CARBON_PERIOD, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
@Html.ValidationMessageFor(model => model.CARBON_PERIOD, "", new { @class = "text-danger" })
</div>
@*<div class="form-group">
@Html.LabelFor(model => model.CARBON_EMISSION_FACTOR, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.CARBON_EMISSION_FACTOR, new { htmlAttributes = new { @class = "form-control align-right" } })
@Html.ValidationMessageFor(model => model.CARBON_EMISSION_FACTOR, "", new { @class = "text-danger" })
</div>*@
@*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
<div class="form-group">
@Html.LabelFor(model => model.CARBON_EMISSION_FACTOR, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.CARBON_EMISSION_FACTOR, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
@Html.ValidationMessageFor(model => model.CARBON_EMISSION_FACTOR, "", new { @class = "text-danger" })
</div>
@*<div class="form-group">
@Html.LabelFor(model => model.CARBON_DIOXIDE, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.CARBON_DIOXIDE, new { htmlAttributes = new { @class = "form-control align-right" } })
@Html.ValidationMessageFor(model => model.CARBON_DIOXIDE, "", new { @class = "text-danger" })
</div>*@
@*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
<div class="form-group">
@Html.LabelFor(model => model.CARBON_DIOXIDE, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.CARBON_DIOXIDE, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
@Html.ValidationMessageFor(model => model.CARBON_DIOXIDE, "", new { @class = "text-danger" })
</div>
<!-- **** 20240327加入輸入傳票號碼**** -->
<div class="form-group">
@Html.LabelFor(model => model.VOUCHER_NUMBER, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.VOUCHER_NUMBER, new { htmlAttributes = new { @class = "form-control align-right" } })
@Html.ValidationMessageFor(model => model.VOUCHER_NUMBER, "", new { @class = "text-danger" })
</div>
<!-- 這一段程式,從「Create檢視畫面」取得。-->
<div class="form-group">
@Html.LabelFor(model => model.PDF_CONTENT):
<div class="col-md-10">
<!-- **** 檔案上傳 **** -->
<input class="pic-upload-input" type="file" name="pdfFile">
<!-- **** 檔案上傳 **** -->
</div>
</div>
@*<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="存檔" class="btn btn-danger" />
</div>
</div>*@
<!-- 添加一個空div來留出空白 -->
<div style="height: 50px;"></div>
<div class="text-center">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="存檔" class="btn btn-danger" />
</div>
</div>
</div>
@*20240327增加上傳檔案 *@
@*@Html.ActionLink("檢視已存檔 PDF 檔案", "GetPdfFile", new { id = Model.DOCUMENT_ID }, new { target = "_blank" })*@
@if (Model.PDF_CONTENT != null && Model.PDF_CONTENT.Length > 0)
{
<div>
<h4>已存檔PDF 文件內容:</h4>
<object data="@Url.Action("GetPdfFile", new { id = Model.DOCUMENT_ID })" type="application/pdf" width="100%" height="600px"></object>
</div>
}
@*@Html.ActionLink("檢視 PDF 檔案", "GetPdfFile", new { id = Model.DOCUMENT_ID }, new { target = "_blank" })*@
</div>
}
@*<div>
@Html.ActionLink("Back to List", "Index")
</div>*@
</body>
</html>
解釋程式碼
這是一個ASP.NET MVC視圖文件,目的是創建或編輯水電賬單的頁面(WaterEdit
)。該頁面使用了Razor語法和HTML Helpers,並通過jQuery和JavaScript實現了前端交互。以下是對代碼的詳細解釋:
@model WebApplication5.Models.WATER_BILL
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@model
聲明了當前視圖使用的模型類型為WATER_BILL
,來自WebApplication5.Models
命名空間。該模型表示水電賬單的信息。Layout
設置了頁面的布局文件,_Layout.cshtml
是共享的布局文件。ViewBag.Title = "WaterEdit";
<style>
.align-right { text-align: right; }
.nowrap { white-space: nowrap; }
</style>
ViewBag.Title
設定頁面的標題為“WaterEdit”。.align-right
用於右對齊文本,.nowrap
用於保持文本在同一行。根據工廠選擇設置其他字段:
$(document).ready(function () {
$("#FACTORY").change(function () {
var FACTORY = $(this).val();
if (FACTORY === "永科廠") {
$("#WATER_SIGNAL").val("23-45678901-2");
$("#METER_NUMBER").val("123D456780");
$("#METER_DIAMETER").val("75");
} else if (FACTORY === "永康廠") {
$("#WATER_SIGNAL").val("12-34567890-1");
$("#METER_NUMBER").val("123D456789");
$("#METER_DIAMETER").val("40");
}
});
});
當用戶選擇不同的工廠(FACTORY
)時,會自動為WATER_SIGNAL
、METER_NUMBER
和METER_DIAMETER
字段填充相應的值。
格式化數字輸入:
$(document).ready(function () {
$(".numeric-input").on("input", function () {
formatNumberInput($(this));
});
$("form").submit(function () {
$(".numeric-input").each(function () {
$(this).val($(this).val().replace(/,/g, ''));
});
});
});
function formatNumberInput(input) {
var val = input.val().replace(/,/g, '');
if (val != '') {
var parts = val.split('.');
parts[0] = parseInt(parts[0]).toLocaleString();
input.val(parts.join('.'));
}
}
1,000
),並在表單提交時去掉分隔符。表單使用了ASP.NET MVC的HTML Helper生成,處理賬單的各個字段。
FACTORY字段:
@Html.DropDownList("FACTORY", listItemsFACTORY, new { @class = "form-control" })
一個下拉列表用於選擇工廠,包含“永康廠”和“永科廠”選項。
WATER_SIGNAL字段(只讀):
@Html.EditorFor(model => model.WATER_SIGNAL, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
顯示水號,使用readonly
屬性禁止用戶編輯。
NUMBER_POINTERS、TOTAL_WATER、TOTAL_BILL_TAX等字段:
@Html.EditorFor(model => model.NUMBER_POINTERS, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
這些字段都是數值輸入框,帶有千位分隔符,並且右對齊。
PDF文件上傳:
<input class="pic-upload-input" type="file" name="pdfFile">
提供文件上傳功能,允許用戶上傳賬單相關的PDF文件。
顯示已存檔PDF:
@if (Model.PDF_CONTENT != null && Model.PDF_CONTENT.Length > 0)
{
<div>
<h4>已存檔PDF 文件內容:</h4>
<object data="@Url.Action("GetPdfFile", new { id = Model.DOCUMENT_ID })" type="application/pdf" width="100%" height="600px"></object>
</div>
}
如果數據庫中已存在PDF文件,會在頁面中顯示該文件的內容。
Html.BeginForm
生成,設置了multipart/form-data
以支持文件上傳。Html.ValidationMessageFor
方法,顯示字段的驗證錯誤信息。這個頁面集成了後端數據模型、水電賬單相關字段的編輯功能、文件上傳、前端交互和表單驗證等功能,是一個典型的MVC視圖。
大家明天見~